<fieldset class="layui-elem-field layui-field-title site-title">
    <legend><a name="fixbar">消费记录</a></legend>
</fieldset>
<a href="javascript:get();" style="padding: 0 0px"><i class="fa fa-refresh fa-lg"></i> <span>刷新</span></a>
<table class="layui-table" id="payRecordTable">
    <title>title</title>
    <colgroup>
        <col>
    </colgroup>
<!--    cardBalance: 0-->
<!--    waterBalance: 0-->
<!--    electricBalance: 0-->
<!--    gasBalance: 0-->
<!--    payTime: "2021-08-10 17:49:46"-->
<!--    transactionMoney: 154-->
<!--    transactionType: "校园卡充值"-->
<!--    userID: "20101106"-->
<!--    username: null-->
    <thead>
    <tr>
        <th>校园卡金额</th>
        <th>水费金额</th>
        <th>电费金额</th>
        <th>气费金额</th>
        <th>付款时间</th>
        <th>交易金额</th>
        <th>交易类型</th>
        <th>用户编号</th>
        <th>用户名</th>
    </tr>
    </thead>
    <tbody id="payRecordTableBody">
    <!--    <tr>-->
    <!--      <td>1</td>-->
    <!--      <td>2016-11-29</td>-->
    <!--      <td>人生就像是一场修行</td>-->
    <!--    </tr>-->

    </tbody>
</table>
<div id="bookTableBody2"></div>
<script>
    var gcount;
    var gdatas;
    var glimit=10;
    function pagerFunc(obj, first) {
        //obj包含了当前分页的所有参数，比如：
        //首次不执行
        // if(!first){
        //do something
        console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
        console.log(obj.limit); //得到每页显示的条数
        var start = (obj.curr - 1) * obj.limit;
        var end;
        if (start + obj.limit > gcount) {
            end = gcount;
        } else {
            end = start + obj.limit;
        }
        mprint(start, end);
    }
    <!--    cardBalance: 0-->
    <!--    waterBalance: 0-->
    <!--    electricBalance: 0-->
    <!--    gasBalance: 0-->
    <!--    payTime: "2021-08-10 17:49:46"-->
    <!--    transactionMoney: 154-->
    <!--    transactionType: "校园卡充值"-->
    <!--    userID: "20101106"-->
    <!--    username: null-->
    function mprint(start, end) {
        var tbhtml = "";
        for (var i = start; i < end; i++) {
            tbhtml += "<tr><td>" + gdatas[i].cardBalance +
                "</td><td>" + gdatas[i].waterBalance +
                "</td><td>" + gdatas[i].electricBalance +
                "</td><td>" + gdatas[i].gasBalance +
                "</td><td>" + gdatas[i].payTime +
                "</td><td>" + gdatas[i].transactionMoney +
                "</td><td>" + gdatas[i].transactionType +
                "</td><td>" + gdatas[i].userID +
                "</td><td>" + gdatas[i].username +
                "</td></tr>";
        }
        console.log(tbhtml);
        $('#payRecordTableBody').html(tbhtml);

    }

    function get() {
        $.ajax({
            //几个参数需要注意一下
            type: "GET",//方法类型
            dataType: "json",//预期服务器返回的数据类型
            url: "http://localhost:8080/money/getRecord",//url
            // data: $('#form1').serialize(),
            success: function (datas) {
                gcount = datas.length;
                gdatas = datas;
                console.log(datas);//打印服务端返回的数据(调试用)
                layui.use('laypage', function () {
                    var laypage = layui.laypage;
                    //执行一个laypage实例
                    laypage.render({
                        elem: 'bookTableBody2' //注意，这里的 test1 是 ID，不用加 # 号
                        , count: gcount //数据总数，从服务端得到
                        , limit: glimit
                        , jump: pagerFunc
                        // }
                    });

                });
            },
            error: function () {
                layer.msg("异常！");
            }

        });
    };

    get();
</script>